<template>
  <div style="margin: 40px">
    <el-button type="text" @click="selectCase">查看病历</el-button>
    <el-descriptions title="患者信息" direction="vertical" :column="4" border :model="patientData">
      <el-descriptions-item label="姓名">{{patientData.pName}}</el-descriptions-item>
      <el-descriptions-item label="患者卡号" >{{patientData.pNo}}</el-descriptions-item>
      <el-descriptions-item label="患者年龄" >{{patientData.pAge}}</el-descriptions-item>
      <el-descriptions-item label="出生日期" >{{patientData.pStartDate}}</el-descriptions-item>
      <el-descriptions-item label="性别">{{patientData.pSex?'女':'男'}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{patientData.pPhone}}</el-descriptions-item>
      <el-descriptions-item label="证件号码">{{patientData.pCard}}</el-descriptions-item>
      <el-descriptions-item label="备注">{{patientData.pArea}}</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">{{patientData.pProvince}}{{patientData.pPlace}}</el-descriptions-item>
    </el-descriptions>

    <template>
      <el-table v-loading="loading" :data="familyList">
        <el-table-column label="家属表主键id" align="center" prop="id" v-if="false"/>
        <el-table-column label="家属关系" align="center" prop="relation">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_family" :value="scope.row.relation"/>
          </template>
        </el-table-column>
        <el-table-column label="家属姓名" align="center" prop="name" />
        <el-table-column label="家属性别" align="center" prop="sex">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
          </template>
        </el-table-column>
        <el-table-column label="家属出生日期" align="center" prop="birthday" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="家属手机号" align="center" prop="phone" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="false">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['patientsystem:family:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['patientsystem:family:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
      <el-dialog title="家属信息" :visible.sync="dialogTableVisible">
        <el-table v-loading="loading" :data="familyList2">
          <el-table-column label="家属表主键id" align="center" prop="id" v-if="false"/>
          <el-table-column label="家属关系" align="center" prop="relation">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_family" :value="scope.row.relation"/>
            </template>
          </el-table-column>
          <el-table-column label="家属姓名" align="center" prop="name" />
          <el-table-column label="家属性别" align="center" prop="sex">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
            </template>
          </el-table-column>
          <el-table-column label="家属出生日期" align="center" prop="birthday" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="家属手机号" align="center" prop="phone" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="addFamily(scope.row)"
                v-hasPermi="['patientsystem:family:edit']"
              >添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </template>
    <el-row style="padding-top: 40px">
      <el-col :span="24" style="text-align: center">
        <el-button type="success" icon="el-icon-circle-plus" style="width: auto;font-size: 30px" @click="selectFamily">添加家庭成员</el-button>
      </el-col>
    </el-row>
  </div>
</template>





<script>
import {getPatient, delPatient, addPatient, updatePatient } from "@/api/patientsystem/patient";
import { listFamily, getFamily, delFamily, addFamily, updateFamily } from "@/api/patientsystem/family";
import { listPatientAndFamily, getPatientAndFamily, delPatientAndFamily, addPatientAndFamily, updatePatientAndFamily } from "@/api/patientsystem/patientAndFamily";

export default {
  dicts: ['sys_user_sex','sys_patient_status','sys_family'],
  components: {},
  props: [],
  data() {
    return {
      patientId: '',
      form:{
        id:null,
        patientId:'',
        familyId:''
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        relation: null,
      },
      dialogTableVisible:false,
      familyList: [],
      familyList2: [],
      patientData: {
        pName: undefined,
        pNo: undefined,
        pAge: undefined,
        pStartDate: null,
        pSex: undefined,
        pPhone: undefined,
        pCard: undefined,
        pProvince: undefined,
        pPlace: undefined,
        pArea: undefined,
      },
    }
  },
  computed: {},
  watch: {},
  created() {
    this.patientId=this.$route.query.id;
    console.log(this.patientId)
    this.getPatientInfo(this.$route.query.id)
    this.getList()
  },
  mounted() {},
  methods: {
    selectCase(){
      this.$router.push({
        path: '/patient/caseInfo',
        query: {
          id: this.patientId
        }
      })
    },
    // 添加家属
    addFamily(row){
      this.form.patientId=this.$route.query.id;
      this.form.familyId=row.id
      addPatientAndFamily(this.form).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.dialogTableVisible = false;
        this.getList()
      });
    },
    /** 查询所有家属列表 */
    selectFamily(){
      this.dialogTableVisible=true
      listFamily().then(response=>{
        this.familyList2 = response.rows;
        this.total = response.total;
      })
    },
    /** 查询家属信息列表 */
    getList() {
      this.loading = true;
      this.queryParams.id=this.$route.query.id
      listFamily(this.queryParams).then(response => {
        this.familyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getPatientInfo(id){
      getPatient(1).then(response => {
        this.patientData = response.data;
        this.form = response.data;
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
